<template>
  <el-dialog
    :model-value="visible"
    title="基本信息"
    width="800"
    :close-on-click-modal="false"
    @close="cls"
  >
    <!-- 表单区域 -->
    <el-form :model="form" label-width="100px">
      <el-form-item label="产品类型" required>
        <el-input v-model="form.type" placeholder="请输入产品类型" />
      </el-form-item>
      <el-form-item label="运输方式" required>
        <el-select v-model="form.transportway" placeholder="请选择运输方式">
          <el-option label="空运" value="空运" />
          <el-option label="海运" value="海运" />
          <el-option label="陆运" value="陆运" />
        </el-select>
      </el-form-item>
      <el-form-item label="起始港口" required>
        <el-input v-model="form.start" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="目的地港口" required>
        <el-input v-model="form.end" placeholder="请输入" />
      </el-form-item>
      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitInquiry">提交询价</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { createEnquiry } from "@/api/Enquiry.js";
// 表格引用
const productRef = ref(null);
// 表格数据
const tableData = ref([]);
// 定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

// 响应式对象
const form = ref({
  cid: "", // 新增 id 字段来保存传入的 ID
  type: "", // 产品类型
  transportway: "", // 运输方式
  start: "", // 起始地
  end: "" // 目的地
});
const data = ref({
  code: "",
  name: "",
  picurl: ""
});

// 声明事件
const emits = defineEmits(["close", "choose"]);
const productName = ref("");
function clear() {
  if (productRef.value) productRef.value.clearSelection();
}
// 加载询价数据
function loadInquiryData(id) {
  form.value.cid = id; // 保存传入的 ID
  // 根据 ID 加载数据的逻辑
  // 可以调用 API 获取的具体数据
  // 这里可以假设你调用了一个 API 方法来获取询价单详细信息
  // Example:
  // apiGetInquiryDetails(id).then(res => {
  //   if (res.code === 200) {
  //     form.value = res.data; // 将获取到的数据填充到 form
  //   }
  // });
}

// 提交询价方法
async function submitInquiry() {
  // 数据验证
  if (
    !form.value.type ||
    !form.value.transportway ||
    !form.value.start ||
    !form.value.end
  ) {
    alert("请填写所有必填项！");
    return;
  }
  // 构造询价数据
  const inquiryData = {
    cid: form.value.cid, // 包含 ID
    type: form.value.type,
    transportway: form.value.transportway,
    start: form.value.start,
    end: form.value.end
  };
  try {
    // 调用API提交询价
    const response = await createEnquiry(inquiryData); // 假设提交询价的API方法
    if (response.code === 200) {
      console.log("询价提交成功:");
      alert("询价提交成功");
      cls(); // 提交成功后关闭弹窗
    } else {
      console.error("询价提交失败:", response.message);
      alert("询价提交失败: " + response.message);
    }
  } catch (error) {
    console.error("提交询价请求失败:", error);
    alert("提交询价请求失败，请重试！");
  }
}
// 方法
function cls() {
  // 通知父组件  我要关闭了
  emits("close");
}
//定义需要暴露的方法
defineExpose({ clear, loadInquiryData });
</script>

<style scoped>
.root {
  width: 95vw;
  background-color: #fff;
  border-radius: 5px;
}
.basic {
  font-size: 24px;
  font-weight: bold;
  color: #0054a6;
  margin-left: 30px;
  margin-top: 20px;
  display: inline-block;
  border-style: none;
  border-left: #0054a6 solid 4px;
  padding-left: 10px;
}

:deep(.avatar-uploader .avatar) {
  width: 128px;
  height: 128px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}
</style>
